<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="sample" label="样本编号" width="135" />
        <el-table-column label="生产日期" width="120">
            <template #default="scope">
                {{ moment(scope.row.produceDate).format('YYYY-MM-DD') }}
            </template>
        </el-table-column>
        <el-table-column prop="deviceNumber" label="过滤设备编号" width="140" />
        <el-table-column prop="filtrationMethod" label="过滤方法" width="120" />
        <el-table-column prop="originalWort" label="原麦汁浓度" width="120" />
        <el-table-column prop="alcoholContent" label="酒精度" width="120" />
        <el-table-column prop="turbidity" label="浊度" width="120" />
        <el-table-column prop="chroma" label="色度" width="120" />
        <el-table-column prop="phValue" label="Ph值" width="120" />
        <el-table-column prop="dissolvedLiquid" label="溶解氧含量" width="120" />
        <el-table-column prop="microbe" label="微生物含量" width="120" />
        <el-table-column prop="bitternessValue" label="苦味值" width="120" />
        <el-table-column prop="foamPerformance" label="泡沫性能" width="120" />
        <el-table-column prop="filterMetrics" label="过滤前后指标对比" width="140" />
        <el-table-column prop="remark" label="备注" width="120" />
        <el-table-column fixed="right" label="操作" min-width="150">
            <template #default="scope">
                <el-button link type="danger" :icon="Delete" size="small"
                    @click="Del(scope.row.filtrateId)">删除</el-button>
                <el-button link type="warning" :icon="Edit" size="small"
                    @click="Upd(scope.row.filtrateId)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
        :page-sizes="[15, 20, 25, 30]" layout="total, sizes, prev, pager, next, jumper" :total="form.totalCount"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />

</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import {read,write} from '@/axios/axiosHelper'

const router = useRouter()
const route = useRoute()

const tableData = ref([]);

const form = reactive({
    pageIndex: 1,
    pageSize: 15,
    totalCount: 0,
    totalPage: 0,
})

const handleSizeChange = (val: number) => {
    Show();
}
const handleCurrentChange = (val: number) => {
    Show();
}

onMounted(() => {
    Show();
})

const Show = () => {
    read.get("f-read/api/Filtrate/QueryFiltrate", {
        params: {
            pageIndex: form.pageIndex,
            pageSize: form.pageSize
        }
    })
        .then(res => {
            tableData.value = res.data.data;
            form.totalCount = res.data.totalCount;
            form.totalPage = res.data.totalPage;
        })
}

const Del = (filtrateId: number) => {
    ElMessageBox.confirm(
        '确认删除吗?',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            write.post("f-write/api/Filtrate/DelFiltrate", {
                filtrateId: filtrateId
            })
                .then(res => {
                    if (res.data.code == 200) {
                        ElMessage.success(res.data.msg);
                        Show();
                    }
                    else {
                        ElMessage.error(res.data.msg);
                        return;
                    }
                })
        })
}

const Upd=(filtrateId: number)=>{
    router.push({
        path: '/UpdFiltrate',
        query: {
            filtrateId: filtrateId
        }
    })
}


</script>    